<template>
	<view class="station-container">
		<view class="title">电站分布</view>
		<view class="content" id="container">
			
		</view>
	</view>
</template>

<script setup>
	import { onMounted, onUnmounted } from "vue";
	import AMapLoader from "@amap/amap-jsapi-loader";
	
	let map = null;
	//获取地图标记点
	const getMarker = (AMap) => {
		//创建一个 Marker 实例：
		const marker = new AMap.Marker({
		  position: new AMap.LngLat(121.404927,31.175854), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
		  title: "上海",
		});
		//创建一个 Marker 实例：
		const marker1 = new AMap.Marker({
		  position: new AMap.LngLat(121.611664,31.183894), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
		  title: "点1",
		});
		const marker2 = new AMap.Marker({
		  position: new AMap.LngLat(121.373603,31.039075), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
		  title: "点2",
		});
		let arr  = [marker, marker1,marker2]
		return arr
	}
	onMounted(() => {
	  window._AMapSecurityConfig = {
	    securityJsCode: "94ea7fdbed486c3841cf9f521e18517c",
	  };
	  AMapLoader.load({
	    key: "bf7687df966f47fb0af67448d07b1195", // 申请好的Web端开发者Key，首次调用 load 时必填
	    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
	    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
	  })
	    .then((AMap) => {
	      map = new AMap.Map("container", {
	        // 设置地图容器id
	        viewMode: "3D", // 是否为3D地图模式
	        zoom: 3, // 初始化地图级别
	        center: [105.984349,33.548189], // 初始化地图中心点位置
	      });
		  
		  //创建一个 Marker 实例：
		  let arr = getMarker(AMap)
		  //将创建的点标记添加到已有的地图实例：
		  map.add(arr);
	    })
	    .catch((e) => {
	      console.log(e);
	    });
	});
	
	onUnmounted(() => {
	  map?.destroy();
	});

</script>

<style lang="scss" scoped>
	.station-container{
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;
		
		.title {
			height: 76rpx;
			margin-left: 46rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 76rpx;
		}
		
		.content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
		}
		#container{
			padding:0px;
			margin: 0px;
			width: 100%;
			height: 440rpx;
		}
	}
</style>